<template>
    <!--广告账户-->
    <div class="content_panel project_modules">
        <div class="content_panel_top">
            <h3 class="panel_title">
                <span>{{$t('common.adAccount')}}</span>
            </h3>
            <el-form ref="form" :model="form" :rules="rules" :inline="false" class="module_form">
                <el-row>
                    <el-col :span="6">
                        <el-form-item prop="appPackage" label="">
                            <select-app-list type="packageName" v-model="form.appPackage" @giveParentData="getAppList" :clearable="false" :placeholder="$t('system.appPackage')"></select-app-list><!--app名称-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="advertiser">
                            <el-select v-model="form.advertiser" clearable :placeholder="$t('common.adServiceProvider')" style="width: 100%"><!--状态-->
                                <el-option v-for="(item,index) in advertisersList" :key="index" :value="item" :label="item" ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <!--<el-button @click="search" type="primary">{{ $t('common.search') }}</el-button>-->
                        <el-button @click="edit('add')" type="primary">{{ $t('common.addAdAccount') }}</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="module_content">
            <div class="content_panel project_modules">
                <div class="table_list">
                    <el-table :data="tableData" :max-height="tableMaxHeight" style="width: 100%">
                        <el-table-column align="left" prop="advertiser" :label="$t('common.adServiceProvider')" min-width="120"></el-table-column><!--广告服务商-->
                        <el-table-column align="left" prop="advertisingAccount" :label="$t('common.adAccount')" min-width="160">
                            <template slot-scope="scope">
                                <el-button @click="edit('edit',scope.row)" type="text">{{ scope.row.advertisingAccount }}</el-button>
                            </template>
                        </el-table-column><!--广告账户-->
                        <el-table-column align="left" prop="advertisingSourse" :label="$t('common.adSource')" min-width="120"></el-table-column><!--广告来源-->
                        <el-table-column align="left" prop="createTime" :label="$t('common.newAddTime')" min-width="120">
                            <template slot-scope="scope">{{ scope.row.createTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                        </el-table-column><!--新增时间-->
                        <el-table-column align="left" prop="updateTime" :label="$t('common.updateTime')" min-width="120">
                            <template slot-scope="scope">{{ scope.row.updateTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                        </el-table-column><!--更新时间-->
                    </el-table>
                </div>
                <!--分页组件-->
                <pagination @pageChange="pageChange" :page="page"><!--分页组件--></pagination>
            </div>
        </div>
        <!--编辑弹框-->
        <el-dialog :visible.sync="editDialog.showEditDialog" width="500px" :title="editDialog.type === 'add' ? $t('common.addAdAccount') : $t('common.maintainAccount')">
            <el-form :model="editDialog.editForm" ref="editForm" :rules="editDialog.rules" :inline="false">
                <el-form-item prop="appPackage" :label="$t('system.appPackage')">
                    <select-app-list type="packageName" v-model="editDialog.editForm.appPackage" :placeholder="$t('verify.plsChoose')"></select-app-list><!--app名称-->
                </el-form-item>
                <el-form-item prop="advertisingSourse" :label="$t('common.adSource')">
                    <el-select v-model="editDialog.editForm.advertisingSourse" clearable :placeholder="$t('verify.plsChoose')" style="width: 100%"><!--广告来源-->
                        <el-option v-for="(item,index) in adSourceList" :key="index" :value="item" :label="item" ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="advertiser" :label="$t('common.adServiceProvider')">
                    <el-select v-model="editDialog.editForm.advertiser" clearable :placeholder="$t('verify.plsChoose')" style="width: 100%"><!--广告服务商-->
                        <el-option v-for="(item,index) in advertisersList" :key="index" :value="item" :label="item" ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="advertisingAccount" :label="$t('common.adAccountName')">
                    <el-input v-model="editDialog.editForm.advertisingAccount" type="text" maxlength="100" :placeholder="$t('verify.plsInput')"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button  @click="submitEdit" type="primary">{{$t('common.confirmOk')}}</el-button>
                <el-button @click="editDialog.showEditDialog = false" type="default">{{$t('common.cancel')}}</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import mixin from '@/service/mixin';
    import Pagination from '@/components/pagination';
    import SelectAppList from '@/components/select-app-list';

    let that = null;
    export default {
        name: 'operation-advertisement-account',
        components: {
            Pagination,
            SelectAppList
        },
        mixins: [mixin],
        data() {
            return {
                form: {
                    appPackage: '',
                    advertiser: '',
                },
                formLabelWidth: this.$i18n.locale === 'zhCN' ? '145px' : '235px',
                rules: {
                    appPackage: [
                        {required: true, message: this.$t('verify.plsChoose'), trigger: 'change'},
                    ],
                },
                tableData: [],
                editDialog: {
                    showEditDialog: false,
                    type: '',
                    editForm: {
                        appPackage: '',
                        advertisingSourse: '',
                        advertiser: '',
                        advertisingAccount: '',
                    },
                    rules: {
                        appPackage: [
                            {required: true, message: this.$t('verify.plsChoose'), trigger: 'change'},
                        ],
                        advertisingSourse: [
                            {required: true, message: this.$t('verify.plsChoose'), trigger: 'change'},
                        ],
                        advertiser: [
                            {required: true, message: this.$t('verify.plsChoose'), trigger: 'change'},
                        ],
                        advertisingAccount: [
                            {required: true, message: this.$t('verify.plsInput'), trigger: 'blur'},
                        ],
                    }
                },
                advertisersList: [],
                adSourceList: [],
            };
        },
        watch: {
            'form.appPackage'(val) {
                if(val) {
                    this.search()
                }
            },
            'form.advertiser'(val) {
                this.search()
            }
        },
        methods: {
            // 搜索列表数据
            search() {
                this.$refs.form.validate(val => {
                    if (val) {
                        this.page.currentPage = 1;
                        this.getTableData();
                    }
                });
            },
            // 配置查询和导出参数
            fillParams(page = this.page) {
                const form = this.form;
                const params = {
                    appPackage: '',
                    advertiser: '',
                    page: {
                        pageNo: page.currentPage,
                        pageSize: this.page.pageSize
                    }
                };
                Object.keys(form).forEach(key => {
                    if (typeof form[key] === 'string' && form[key]) {
                        form[key] = form[key].trim();
                        params[key] = form[key];
                    }
                });
                return params;
            },
            // 获取列表数据
            getTableData(page = this.page,callBack) {
                const params = this.fillParams(page);
                this.$api.report.queryAdvertisingAccountList(params).then(res => {
                    const {status, data, error} = res;
                    if ('1' === status && '00000000' === error && data) {
                        this.tableData = data.data || [];
                        this.setPage(data.page, this.page);
                    }
                    this.tableMaxHeight = document.body.clientHeight - 220;
                });
            },
            edit(type,row) {
                this.editDialog.type = type;
                if(type === 'add') this.editDialog.editForm = {appPackage: '', advertisingSourse: '', advertiser: '', advertisingAccount: ''};
                if(type === 'edit') this.editDialog.editForm = Object.assign(this.editDialog.editForm, row);
                this.editDialog.showEditDialog = true;
                this.$nextTick(() => {
                    this.$refs.editForm.clearValidate();
                });
            },
            submitEdit() {
                this.$refs.editForm.validate((val) => {
                    if (val) {
                        const { editForm } = this.editDialog;
                        const params = {
                            appPackage: editForm.appPackage,
                            advertisingSourse: editForm.advertisingSourse,
                            advertiser: editForm.advertiser,
                            advertisingAccount: editForm.advertisingAccount
                        };
                        const type = this.editDialog.type;
                        if(type === 'add') {
                            this.$api.report.insertAdvertisingAccount(params).then(res => {
                                const {status, data, error} = res;
                                if ('1' === status && '00000000' === error) {
                                    this.$message.success(this.$t('common.successfulOperation'));
                                    this.getTableData();
                                    this.editDialog.showEditDialog = false;
                                }
                            })
                        }
                        if(type === 'edit') {
                            params.id = editForm.id;
                            this.$api.report.updateAdvertisingAccount(params).then(res => {
                                const {status, data, error} = res;
                                if ('1' === status && '00000000' === error) {
                                    this.$message.success(this.$t('common.successfulOperation'));
                                    this.getTableData();
                                    this.editDialog.showEditDialog = false;
                                }
                            })
                        }
                    }
                });
            },
            getAppList(data) {
                if (data.length > 0) {
                    this.form.appPackage = data[0].packageName;
                    this.getTableData();
                }
            },
            // 获取广告商&&广告来源数据
            getAdvertisersAndSourceList() {
                this.$api.report.queryAdvertiserAndAdvertising({}).then(res => {
                    const {status, data, error} = res;
                    if ('1' === status && '00000000' === error) {
                        this.advertisersList = data.advertiserList;
                        this.adSourceList = data.AdvertisingSourceList;
                    }
                });
            },
        },
        created() {
            that = this;
            this.getAdvertisersAndSourceList();
        },
    };
</script>

<style lang="scss">
    [data-page=operation-advertisement-account] {
        .el-col {
            padding-left: 10px;
        }
        .el-table .cell, .el-table th > .cell {
            word-break: keep-all;
            word-wrap: break-word;
        }
        .el-tooltip__popper {
            max-width: 300px;
            word-break: break-all;
            background-color: #fff;
            box-shadow: 0px 0px 5px #ccc;
            color: #000;
        }
        .el-date-editor .el-range-separator {
            width: 35px;
        }
    }
</style>
